﻿@using PMS.Web.Models.Customers
@model LoginModel
@{
    Layout = null;
    ViewData["Title"] = "后台登录 >_<";
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/PearAdminLayui/component/pear/css/pear.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lib/PearAdminLayui/admin/css/other/login.css" asp-append-version="true" />
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        a#iforgotpassword { margin-right: 10px; }
        .codeImage { cursor: pointer; }
        .externalauthmethods { position: relative; font-size: 0; line-height: 38px; padding-top: 20px; }
        .externalauthmethods > * { display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 14px; }
    </style>
</head>
<body background="/lib/PearAdminLayui/admin/images/background2.svg" style="background-size: cover;">
    <form class="layui-form" action="javascript:void(0);">
        <div class="layui-form-item">
            <img class="logo" src="~/lib/PearAdminLayui/admin/images/logo.png" />
            <div class="title">PMS Admin</div>
            <div class="desc">
                PMS Admin Author: DavidLee. All Rights Reserved.
            </div>
        </div>
        <div class="layui-form-item">
            <input type="text" name="@Model.NameOf(m => m.Account)" placeholder="@Model.DisplayName(m => m.Account)" lay-verify="required" hover class="layui-input" />
        </div>
        <div class="layui-form-item">
            <input type="password" name="@Model.NameOf(m => m.Password)" placeholder="@Model.DisplayName(m => m.Password)" lay-verify="required" hover class="layui-input" />
        </div>

        @if (Model.DisplayCaptcha)
        {
            <div class="layui-form-item imgCaptcha">
                <input type="text" placeholder="验证码 : " name="@Model.NameOf(m => m.ExtraText)" hover lay-verify="required" class="code layui-input layui-input-inline" />
                <input name="@Model.NameOf(m => m.CaptchaCodeEncrypt)" value="" class="layui-hide" />
                <img src="/lib/PearAdminLayui/admin/images/captcha.gif" class="codeImage" />
            </div>
        }
        <div class="layui-form-item">
            <input type="checkbox" name="@Model.NameOf(m => m.RememberMe)" title="@Model.DisplayName(m => m.RememberMe)" lay-skin="primary" @if (Model.RememberMe) { <text> checked</text> } />
            <div class="layui-inline" style="float: right; margin-top: 10px;">
                <a title="密码找回" asp-controller="Customer" asp-action="PasswordRecoveryView">忘记密码?</a>
                <a title="新用户注册" asp-controller="Customer" asp-action="RegisterView">新用户注册</a>
            </div>
        </div>
        @await Component.InvokeAsync("ExternalMethods", "ExternalAuthentication")
        <div class="layui-form-item">
            <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
                登 入
            </button>
        </div>
        <input name="@Model.NameOf(m => m.DisplayCaptcha)" value="@Model.DisplayCaptcha.ToString()" class="layui-hide" />
        <input name="@Model.NameOf(m => m.LoginType)" value="@((int)Model.LoginType)" class="layui-hide" />
        <input name="@Model.NameOf(m => m.ReturnUrl)" value="@Model.ReturnUrl" class="layui-hide" />
    </form>
    @await Component.InvokeAsync("ModelValidateError")
    <!-- 资 源 引 入 -->
    <script src="~/lib/PearAdminLayui/component/layui/layui.js"></script>
    <script src="~/lib/PearAdminLayui/component/pear/pear.js"></script>
    <script src="~/dist/js/utils/backendapiconfig.min.js" asp-append-version="true"></script>
    <script type="text/javascript">
        layui.use(['form', 'jquery', 'button', 'http', 'popup', 'loading', 'laytpl'], function () {
            var form = layui.form,
                button = layui.button,
                http = layui.http,
                popup = layui.popup,
                loading = layui.loading,
                laytpl = layui.laytpl,
                $ = layui.jquery;

            function pageInit() {
                var captchaModule = $(".imgCaptcha");
                getCaptchData(120, 44);

                if ($("img.codeImage").length > 0) {
                    $("img.codeImage").on("click", function () {
                        getCaptchData(120, 44);
                    });
                }
                function getCaptchData(imgw, imgh) {
                    if (captchaModule.length > 0) {
                        http.get(backendwebapiConfig.getcaptcha,
                            { imgwidth: imgw, imgheight: imgh },
                            function () { //beforeSend
                                loading.block({ type: 5, elem: '.imgCaptcha', msg: '' })
                            }
                        ).done(function (response) {
                            if (response.state && response.state === 200) {
                                $("input[name=ExtraText]").val("");
                                $("input[name=CaptchaCodeEncrypt]").val(response.data.Answer);
                                $(".codeImage").attr('src', response.data.CaptchBase64Data);
                            }
                        }).fail(function (error) {
                            http.ajax.logError(error);
                        }).always(function () {
                            loading.blockRemove(".imgCaptcha", 1000);
                        });
                    }
                }
            };

            pageInit();
            // 登 录 提 交
            form.on('submit(login)', function (data) {
                var loadbtn = null;
                loginData = data.field;

                $('.layui-input').removeAttr('failure');
                http.post(backendwebapiConfig.customerlogin,
                    loginData,
                    function () { //beforeSend
                        loadbtn = button.load({
                            elem: '.login',
                            time: 10000
                        });
                    }
                ).done(function (response) {
                    if (response.state && response.state === 200) {
                        popup.success(response.message, function () {
                            if (response.data.returnUrl)
                                http.ajax.handleTargetUrl(response.data.returnUrl);
                        });
                    }
                }).fail(function (error) {
                    //For ModelValidation
                    if (error.status && error.status === 400) {
                        var validator = error.responseJSON;
                        if (validator.ErrorCode && validator.ErrorCode === "FluentValidationError") {
                            var validateTpl = document.getElementById('validateResultTpl').innerHTML;
                            laytpl(validateTpl).render(validator, function (html) {
                                http.ajax.showError({
                                    message: '提示信息',
                                    details: html
                                });
                            });
                            //标红校验错误的数据框
                            layui.each(validator.Errors, function (index, item) {
                                var inputField = item.ErrorField;
                                $("input[name=" + inputField + "]").attr('failure', '');
                            });
                        }
                    }
                }).always(function () {
                    loadbtn.stop(function () { });
                });
                return false;
            });
        });
    </script>
</body>
</html>